<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>
            <!--v-model.trim 去掉空格  -->
            <!-- v-model.number 转换为数字类型 -->
            <!-- v-model.lazy 每次 输入都会触发 ，所以可以等输入框失去焦点拿到数据-->
            <!-- 当我们的数据运用一个v-for    想让数据删除，虚拟DOM 是一个对象，比较节点，元素类型是否改变
             判断key新旧是否相同，相同就复用 ，不同就删除，假设一个输入框，我需要删除它，没有注入的key，就会比较父组件和默认索引值，可能会出现误删，但是给了id就不会，因为key是唯一的，不会重复。  
            会尝试原地复用
             -->

            <input type="text" v-model.trim.number.lazy="name" @click.stop @keyup.enter="add">
            <a href="https：//www.baidu.com" @click.prevent.stop="fn">添加</a>
        </div>
        <ul>
            <li v-for="item in list">
                <button>{{item.name}}删除</button>
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in list">
                <button @click="list.splice(index,1)">{{item.name}}删除</button>
            </li>
        </ul>


    </div>



    <script src=" vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "",
                list: [
                    { id: 1, name: "小明" },
                    { id: 2, name: "小红" },
                    { id: 3, name: "小刚" },

                ]

            },
            methods: {
                fn(e) {
                    this.list.push({
                        id: this.list.length + 1,
                        name: this.name
                    })

                },

                add() {
                    this.list.push({
                        id: this.list.length + 1,
                        name: this.name
                    })
                    console.log('键盘被巴拉了  ----->  ', '键盘被巴拉了');

                }

            }


        });
    </script>
</body>

</html>